<template>
	<view class="container">
		<view class="user">
			<view class="user-info" v-if="isLogin">
				<u-avatar :src="userInfo.avatar" size="120"></u-avatar>
				<text style="margin-left: 20rpx;font-size: 40rpx;">{{userInfo.nickname}}</text>
				<view class="VIP">
					<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/16/ee7c2d205bd149e79575e9843c950297u44do0doi9.png"></image>
				</view>
			</view>
			<view class="user-info" v-else>
				<u-avatar :src="PersonLog" size="120"></u-avatar>
				<text style="margin-left: 20rpx;font-size: 40rpx;">请登录</text>
				<view class="VIP">
					<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/16/ee7c2d205bd149e79575e9843c950297u44do0doi9.png"></image>
				</view>
			</view>
		</view>
		<view class="sale">
			<view class="sale-item" v-for="item in sales">
				<view class="head">
					<image style="width: 100rpx;height: 100rpx;" src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/19/1771bcdf54d84d98aba1f37a8ed347fejrf9vopqka.png" mode=""></image>
					<view class="title">
						曼德呵护VIP
					</view>
				</view>
				<view class="vip-detail">
					<view class="type">
						会员类型：
						{{item.type}}
					</view>
					<view class="tip">
						*退款金额为当前开通的会员价格减去已经使用的优惠次数*2
					</view>
					<view class="pay">
						<button @click="refund(item)" class="btn">会员退费</button>
					</view>
					<view class="icon">
						<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/19/eb121f2f7b6e41fcb38ef7ead5dd0ed3p8sf7i2l8t.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
import { memberDetail, memberList, memberOrder, memberRefund } from "../../../api/menber";
	export default{
		data(){
			return {
				sales:[],
				vip:[],
				order:[],
			}
		},
		computed: mapGetters(['isLogin', 'userInfo', 'uid']),
		methods:{
			refund(value){
				memberRefund(value.orderNo).then(res=>{
					this.$refs.uToast.show({
						message: '退费申请成功'
					})
					uni.navigateTo({
						url:"/pages/user/order/refund"
					})
				}).catch(Err=>{
					this.$refs.uToast.show({
						message: '退款请求已经提交过了'
					})
				})
			}
		},
		onShow() {
			memberList().then(res1=>{
				this.vip= res1.data
				memberDetail().then(res=>{
					this.sales = res.data
					this.sales.forEach(item=>{
						item.type = this.vip[item.type].vipName
					})
				})
			})
			
			memberOrder().then(res=>{
				this.order = res.data.list
			})
		}
	}
</script>

<style lang="scss">
.container{
	background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/14122ccc126643eb88515e1b7e918e2e067l0xqbfd.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 120vh;
	
	.user{
		height: 220rpx;
		display: flex;
		align-items: flex-end;
		padding: 20rpx 40rpx;
		
		.user-info{
			display: flex;
			align-items: center;
			
			.VIP{
				width: 100rpx;
				height: 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.tip{
			position: absolute;
			top: 35rpx;
			right: 42rpx;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
}
.pay{
	width: 400rpx;
	margin: 0 auto;
	margin-top: 20rpx;
}
.type{
	font-size: 40rpx;
	margin-bottom: 20rpx;
}
			.btn {
				padding: 10rpx 100rpx;
				background-color: #f8687d;
				border-radius: 40rpx;
				color: #fff;
			}
.sale-item{
	background: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	position: relative;
	padding: 40rpx;
}
.icon{
	position: absolute;top: 0rpx;
	right: 0rpx;
	image{
		width: 200rpx;
		height: 160rpx;
	}

}
.head{
	display: flex;
	font-size: 40rpx;
	font-weight: 700;
	align-items: center;
	margin-bottom: 20rpx;
	
	.title{
		margin-left: 20rpx;
	}
}
</style>